Lookerで草グラフっぽいものを作成してDevelopers.IOの投稿数を可視化してみた

Lookerで草グラフっぽいものを作成してDevelopers.IOの投稿数を可視化してみた

Clock Icon2019.12.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。DA部プリセールスエンジニアの兼本です。

このエントリはLooker Advent Calendar 2019の24日目のエントリです。

皆さんは草グラフをご存じですか?
Githubの活動状況を可視化してくれる「アレ」です。
弊社の西村祐二がプロフィールに表示する方法をご紹介していたりしていますが、アクセス状況などを可視化する際によく使われるグラフ形式です。

GitHub contribution graph と呼ぶそうですが、英語圏でも「Grass-Graph」と呼んでいるところもありますね。

Lookerで草を生やしてみたい

さて、2019年12月にDevelopers.IOのブログ掲載記事数が2万本を超えました。

おめでたいので、このデータを使って草を生やしてみたいと思ったのが、このエントリのきっかけです。

Custom Visualization

ちょうどLooker Advent Calendar 2019の16日目のエントリで日本情報通信株式会社のYoheiNakane氏が「LookerのCustom Visualizationを試す」というエントリを投稿されていましたので、これが使えるのでは?と思いました。

調べてみると、D3.jsというJavaScriptの可視化ライブラリにもCalender Viewという草グラフがあるので、これは使えそうです。

ただ、残念ながら私は普段JavaScriptを使った開発をしないので、数日でこれを実現するのは一筋縄ではいかなそうです。しかも弊社は12月20日で2019年の業務終了し、2週間の年末年始休業というぶっ飛んだスケジュールなので、今回は勘弁したるわ(ごめんなさい)という感じです。

どなたか私にD3.jsの組み込み方を教えてください。

標準機能をどうにかして草グラフにカスタマイズ

さて、Custom Visualizationはいったん忘れて、標準の可視化機能を使って草グラフを実現できるか考えてみます。
Lookerには草グラフはないですが、テーブルというVizが用意されていますので、レイアウト的にはこれを使うのがよさそうです。

今回の場合だと事前に用意していたブログ投稿データから、DIMENSIONの日付型データ「投稿日」の投稿年を示す「Year」をY軸に、投稿月を示す「Month Name」をPIVOTに指定します。また、集計データはMEASURESの数値型データ「投稿本数」を使用します。

作成したデータからVizを作ってみます。まずは標準のテーブル形式です。

テーブル内に棒グラフが表示されていますが、今回このような演出は不要なので、設定をカスタマイズして棒グラフをOFFにします。

さらにカラーパレットを変更して草っぽい緑色の配色を選択します。

だいぶんイメージに近づいてきましたが、草グラフでは数値データは不要ですね。

ところが、LookerのテーブルVizではこの数値を削除するカスタマイズができません。
そこで今回はLookMLを使ってフォントサイズを0にするという方法で数値データを表示しないトリックを使いました。LookMLはデータモデリングだけではなく表示に関する定義もできてしまうのが面白いところですね。

作成中のBizをいったん保存して、DevelopメニューからLookMLの定義を開きます。

既存の「投稿本数」という定義をコピーして新しく「measure: count_kusa」という定義を作成し、Labelを"投稿本数(草)"、フォントサイズを15pxから0pxに変更します。

  measure: count {
    label: "投稿本数"
    type: count
    drill_fields: []
    html: <span style="font-size:15px;">{{ rendered_value }}</p> ;;
  }

  measure: count_kusa {
    label: "投稿本数(草)"
    type: count
    drill_fields: []
    html: <span style="font-size:0px;">{{ rendered_value }}</p> ;;
  }

作成したらLookMLの定義を保存してVizの作成画面に戻り、集計対象のフィールドを「投稿本数」から「投稿本数(草)」に変更します。

Bizを実行すると数値データが表示されないことが確認できました。標準Vizのカスタマイズで何とか草グラフを作成することができましたねw

せっかくなのでいろんな草を生やしてみる。

投稿者のニックネームと記事のシリーズをフィルタして、いくつかの草グラフを表示してみます。

まずは投稿数1位のしんやさんの草グラフです。

続いて2位の諏訪さんの草グラフです。

こちらは3位の佐々木さんの草グラフです。

やはり皆さん定期的に草を生やしていますね。これは流石と言わざるを得ません。

最後にこれが私の草グラフです。

これを見ていると「来年も頑張らないとな」という気持ちになります。(涙)

続いてシリーズでもフィルタしてみましょう。まずはシリーズ名に「AWS」を含むエントリの草グラフです。

AWS関連はre:Inventの開催に合わせてたくさんの草が生える傾向にあります。特に2019年のre:Inventは前代未聞の80名体制でブログを書きまくっているので大量に草が生えていますね。(私も10本書きました)

そしてこちらは私のチームが担当している「Alteryx」シリーズの草グラフです。

Alteryxは2018年12月が際立っていますが、これはAlteryx関連で4つのアドベントカレンダーを同時進行したことが大きく貢献した結果です。

最後はLookerの草グラフです。

Lookerは2019年に入ってから草を生やし始めたのですが、しんやさんがたくさんのブログを書きまくったおかげで草がたくさん生えています。
お陰様でLooker社からも「Looker Best Ambassador賞」という賞をいただくことができました。

まとめ

いかがでしたか。
草グラフは、敢えて細かい数値を表示しないことで全体的な傾向を俯瞰しやすい特徴があります。適材適所なVizを選択して、よりよい可視化ライフを送りたいものですね。
以上、最後まで読んでいただきありがとうございました。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.